// css3圆角
@mixin border-radius ($radius : 3px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

// css盒阴影
@mixin box-shadow ($property) {
  -webkit-box-shadow: #{$property};
     -moz-box-shadow: #{$property};
      -ms-box-shadow: #{$property};
       -o-box-shadow: #{$property};
          box-shadow: #{$property};
}

// css3位置偏移
@mixin translate ($xAxis, $yAxis) {
  -webkit-transform: translate($xAxis, $yAxis);
     -moz-transform: translate($xAxis, $yAxis);
      -ms-transform: translate($xAxis, $yAxis);
       -o-transform: translate($xAxis, $yAxis);
          transform: translate($xAxis, $yAxis);
}

// css3旋转
@mixin rotate ($angle) {
  -webkit-transform: rotate($angle);
     -moz-transform: rotate($angle);
      -ms-transform: rotate($angle);
       -o-transform: rotate($angle);
          transform: rotate($angle);
}

// css3伸缩
@mixin scale ($multiple) {
  -webkit-transform: scale($multiple);
     -moz-transform: scale($multiple);
      -ms-transform: scale($multiple);
       -o-transform: scale($multiple);
          transform: scale($multiple);
}

// css3交互过渡
@mixin transition ($property) {
  -webkit-transition: #{$property};
     -moz-transition: #{$property};
      -ms-transition: #{$property};
       -o-transition: #{$property};
          transition: #{$property};
}

// css3动画（动画默认停留在最后一帧）
@mixin animation ($property, $forwards : forwards) {
  -webkit-animation: #{$property};
     -moz-animation: #{$property};
      -ms-animation: #{$property};
       -o-animation: #{$property};
          animation: #{$property};
  -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
       -o-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
// 动画帧
@mixin keyframes ($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}


// 背景图设置
@mixin background ($url) {
  background: url($url) no-repeat 0 0;
  background-size: 100% auto;
}
// 允许您以特定的方式定义匹配某个区域的特定元素
@mixin box-sizing ($property) {
  -webkit-box-sizing: #{$property};
     -moz-box-sizing: #{$property};
      -ms-box-sizing: #{$property};
       -o-box-sizing: #{$property};
          box-sizing: #{$property};
}
